<!doctype html>
<!--[if lt IE 7]><html class="ie ie6"><![endif]-->
<!--[if IE 7]><html class="ie ie7"><![endif]-->
<!--[if IE 8]><html class="ie ie8"><![endif]-->
<!--[if IE 9]><html class="ie ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Animate示例</title>
    <script>!function(a){0>" "+a.className.toLowerCase()+" ".indexOf(" ie ")&&(a.className+=navigator.userAgent.toUpperCase().indexOf("MSIE")>-1?" ie ieH":" noie")}(document.getElementsByTagName("html")[0]);</script>
    <style>
        body{margin: 0;padding: 0;}
        input{width: 50px;}
        select{background-color: #ccc;}
        .box{width: auto;height: 100px;position: absolute;left: 300px;background-color: #ccc;}
        #doc{width: 50px;height: 50px;position: absolute;left: 50%;background-color: #ccc;z-index: 999;top: 0%;margin-top: -56px;margin-left: -28px;resize: none;outline: none;}
    </style>
</head>
<body>
    <div>时长：<input type="text" id="duration" value="1000">毫秒&nbsp;&nbsp;&nbsp;&nbsp;fps：<input type="text" id="fps" value="60">帧</div>
    <button onclick="A.reset()">归位</button>
    <button onclick="A.run()">运行</button>
    <button onclick="A[this.innerHTML=='显示文档'?'show':'hide']();this.innerHTML=this.innerHTML=='显示文档'?'隐藏文档':'显示文档'">显示文档</button>

    <textarea readonly id="doc">
原型：
CL_Animate(args*)
可变长参数，参数无顺序，规则如下：
number类型：执行的时间，单位毫秒，缺省1000
string类型：该参数决定使用何缓动算法计算，原1.0版缓动公式不再支持，2.0版采用新的缓动公式：
                1、jQuery内置缓动公式：linear、swing
                2、标准动画缓动公式：
                    （变化曲线图：http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html）
                                加速              减速              加速后减速
                    二次方     easeInQuad          easeOutQuad         easeInOutQuad
                    三次方     easeInCubic         easeOutCubic        easeInOutCubic
                    四次方     easeInQuart         easeOutQuart        easeInOutQuart
                    五次方     easeInQuint         easeOutQuint        easeInOutQuint
                    波动函数    easeInSine          easeOutSine         easeInOutSine
                    幂运算     easeInExpo          easeOutExpo         easeInOutExpo
                    平方根     easeInCirc          easeOutCirc         easeInOutCirc
                    弹性膨胀    easeInElastic       easeOutElastic      easeInOutElastic
                    弹性反射    easeInBack          easeOutBack         easeInOutBack
                    弹簧      easeInBounce        easeOutBounce       easeInOutBounce


function类型：函数，每次被stop时候都会调用此函数

方法：
run(callback[,onStop])  计算动画，claaback应为一个函数，
                            该函数会接收到一个参数百分比(算法类型决定百分比的升长速度)
                            onStop也应为一个函数，在当前run执行完后，onStop会被调用
stop()                  终止掉当前动画
init(args*)             可重设创建动画对象的属性，
                            参数规则与对象创建参数规则一致（允许只重设个别属性）
easy(element,css[,onStop])  （需要easy扩展支持）直接通过设置element的css值实现动画，简洁直观，一句代码搞定一切
                                类似jq的animate，不过，css的属性值必须得是标准的字符串
                                onStop同上

全局设置：
CL_Animate.fps = 60  设置动画帧率为每秒60帧，缺省60帧

用法一(run计算方法)：
<div id="r" style="position:absolute; width:50px; height:50px; left:0px; top:0px; background-color:#000000;"></div>
咱弄个动画，让上面的div平滑右移动500个像素单位：
var A = new CL_Animate().run(function(x){
   document.getElementById("r").style.left = (500*x)+"px";
});
这样，就可以完成右移动动画的制作了，缺省移动1000毫秒，抛物线减速滑动

用法二（需要easy扩展支持）：
（同样用上文的div）
 var ele = document.getElementById("r");
 var A = new CL_Animate().easy(ele, {left: "500px"});
 轻松简便，将该div由原处变化到left为500px处

 用法三：（需要easy扩展支持，类似仅支持form、to的css动画）
（同样用上文的div）
 var ele = document.getElementById("r");
 var A = new CL_Animate().easy(ele, [
    {left: "0px"},
    {left: "500px"}
 ]);
 轻松简便，将该div由left:0px变化到left:500px




easy扩展方法增强：
除了增加上文所讲的方法三的支持外，另外对方法一的支持进行了增强，重构了css样式的读取，增加了单位换算，更准确的计算出了元素节点样式，同时增加了特殊样式的支持，如旋转等样式：
 var A = new CL_Animate().easy(ele, [
    {transform: "rotate(0deg)"},
    {transform: "rotate(360deg)"}
 ]);
 另外增加单属性多变量的支持：
  var A = new CL_Animate().easy(ele, [
    {padding: "10px 20px"},
    {padding: "50px 100px"}
 ]);


缓动公式扩展：
    为满足广大广大动画效果的需求，我们将缓动公式独立成了接口形式：CL_Animate.easing。
    它是一个对象，缓动公式都封装在这个对象里，因此，可以公共扩展它而让CL_Animate支持自定义的缓动公式。
    缓动公式的接口采用标准的TBCD接口，例如 easeInQuad: function(t, b, c, d){return c*(t/=d)*t+b}。
    扩展需注意：default为默认方法，它的值必须是个字符串，并且只有它支持字符串重定向到其它扩展
    TBCD参数详细：
        T：timestamp，指缓动效果开始执行到当前帧所经过的时间段，单位ms。
        B：beginning val，起始值。
        C：change，要变化的总量。
        D：duration，动画持续的时间。
    在CL_Animate中，T是一个从0-1之间的小数变化，B恒定为0，C、D恒定为1。返回的起始值和终止值当然也分别是0和1。
    由于2.0版本废弃了1.0版本中的缓动公式，因此，作者专门为1.0的兼容提供了1.0版的缓动公式扩展CL_Animate.ver1_easing.js（注意，使用该扩展后会更换默认的缓动公式为para-dec）


方法扩展：
    其实CL_Animate动画的初衷只是run方法，easy是通过run方法扩展而得，因此，可以通过修改原型进行扩展，如easy：
    CL_Animate.prototype.easy = function(){......}
    </textarea>


    <div class="box" style="top:100px" id="box1">
        <select name="" id="box-s1"></select>
    </div>
    <div class="box" style="top:210px" id="box2">
        <select name="" id="box-s2"></select>
    </div>
    <div class="box" style="top:320px" id="box3">
        <select name="" id="box-s3"></select>
    </div>

    <script type="text/javascript" src="../lib/Animate.js"></script>
    <script type="text/javascript" src="../lib/Animate.easy.js"></script>
    
    <script>
        var $id = function(id){return document.getElementById(id)};
        // 遍历输出可选的缓动公式
        !function(){
            var i,option,
                box_s1 = $id("box-s1"),
                box_s2 = $id("box-s2"),
                box_s3 = $id("box-s3");
            for(i in Animate.easing){
                option = document.createElement("option");
                option.innerHTML = i;
                option.value = i;
                box_s1.appendChild(option);
                option = document.createElement("option");
                option.innerHTML = i;
                option.value = i;
                box_s2.appendChild(option);
                option = document.createElement("option");
                option.innerHTML = i;
                option.value = i;
                box_s3.appendChild(option);
            }
        }();

        var A = {
            A1: new Animate(),
            A2: new Animate(),
            A3: new Animate(),
            AD: new Animate(500),
            reset : function(){
                this.A1.stop();
                this.A3.stop();
                this.A2.stop();
                $id("box1").style.left = "300px";
                $id("box2").style.left = "300px";
                $id("box3").style.left = "300px";
            },
            run:function(){
                var d = parseInt($id("duration").value);
                var fps = parseInt($id("fps").value);
                Animate.fps = fps;
                this.reset();
                this.A1.init(d, $id("box-s1").value).easy($id("box1"), {left: "1000px"});
                this.A2.init(d, $id("box-s2").value).easy($id("box2"), {left: "1000px"});
                /*上面的写法虽然方便，但是支持的样式有限，css3变形、旋转等以及多参数的属性(如padding)可能会因为单位不同的问题而不能很好的支持，下文是类似仅支持form、to的css动画的另一种写法*/
                this.A3.init(d, $id("box-s3").value).easy($id("box3"), [
                    {left: "300px"},    // form
                    {left: "1000px"}    // to
                ]);
            },
            show:function(){
                var AD = this.AD;
                AD.stop().init("easeOutBounce").easy($id("doc"), {top:"50%", width:"50px", height:"50px", marginTop:"-28px"}, function(){
                    AD.init("easeOutElastic").easy($id("doc"), {
                        marginTop:"-250px",
                        marginLeft:"-350px",
                        width:"700px",
                        height:"500px"
                    });                   
                });
            },
            hide:function(){
                var AD = this.AD;
                AD.stop().init("easeInBack").easy($id("doc"), {top:"50%",marginTop:"-28px",marginLeft:"-28px", width:"50px", height:"50px"}, function(){
                    AD.easy($id("doc"), {top:"0%",marginTop:"-56px"});
                });
            }
        };
    </script>
</body>
</html>